﻿<html lang="zh-cn">
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="Guo Yinxin">

	<link rel="shortcut icon" href="icons/monitor.ico">

	<!-- 框架皮肤 -->
	<link href="css/flat-ui.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<title>海洋观测系统运行状态监控</title>

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- Slider bar hover color set -->
	<link href="css/bootstrap.css" rel="stylesheet">

	<!-- Dashboard  -->
	<link href="css/dashboard.css" rel="stylesheet">

	<!-- Kendo UI CSS-->
	<!--<link href="css/kendo.common.min.css" rel="stylesheet">-->
	<!--<link href="css/kendo.default.min.css" rel="stylesheet">-->
	<link href="css/kendo.dataviz.min.css" rel="stylesheet">
	<link href="css/kendo.dataviz.default.min.css" rel="stylesheet">
	<link href="style/kendo.common.min.css" rel="stylesheet">
	<link href="style/kendo.default.min.css" rel="stylesheet">

	<!-- Modal -->
	<link href="css/bootstrap-modal.css" rel="stylesheet">
	<link href="css/bootstrap-responsive.css" rel="stylesheet">

	<!-- Modal CSS -->
	<style type="text/css">
		body.modal-open,
		.modal-open .navbar-fixed-top,
		.modal-open .navbar-fixed-bottom
		{
			margin-right: 0;
		}
		.modal
		{
			left: 50%;
			bottom: auto;
			right: auto;
			padding: 0;
			width: 500px;
			margin-left: -250px;
			background-color: #ffffff;
			border: 1px solid #999999;
			border: 1px solid rgba(0, 0, 0, 0.2);
			border-radius: 6px;
			-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
			box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
			background-clip: padding-box;
		}
		.modal.container
		{
			max-width: none;
		}
	</style>

	<!-- Top Block-->
	<style type="text/css">
		.top-block span
		{
			clear: both;
		}
		.top-block
		{
			font-size: 14px;
			text-align: center;
			font-weight: bold;
			background-image: -webkit-linear-gradient(top, hsl(200, 40%, 80%), hsl(230, 55%, 95%));
			line-height: 22px;
			text-shadow: 0 0 1px #DDD;
		}
		.notification
		{
			display: block;
			position: absolute;
			top: 45px;
			/*right: 5px;*/
			line-height: 16px;
			height: 16px;
			padding: 0 5px;
			font-family: Arial, sans-serif;
			color: white !important;
			text-shadow: 0 1px hsla(0, 0%, 0%, 0.25);
			border-width: 1px;
			border-style: solid;
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			-webkit-box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.08), inset 0 1px hsla(0, 100%, 100%, 0.3);
			-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), inset 0 1px rgba(255, 255, 255, 0.3);
			box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.08), inset 0 1px hsla(0, 100%, 100%, 0.3);
			border-color: #2FABE9;
			background-color: #67C2EF;
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(200, 80%, 82%)), color-stop(100%, hsl(200, 81%, 67%)));
			background-image: -webkit-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
			background-image: -moz-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
			background-image: -ms-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
			background-image: -o-linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
			background-image: linear-gradient(top, hsl(200, 80%, 82%), hsl(200, 81%, 67%));
		}
		.notification.green
		{
			border-color: #5AAD34;
			background-color: #78CD51;
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(101, 54%, 71%)), color-stop(100%, hsl(101, 55%, 56%)));
		}
		.notification.yellow
		{
			border-color: #F4A506;
			background-color: #FABB3D;
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(40, 95%, 76%)), color-stop(100%, hsl(40, 95%, 61%)));
		}
		.notification.red
		{
			border-color: #FA5833;
			background-color: #FA603D;
			background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsl(11, 95%, 76%)), color-stop(100%, hsl(11, 95%, 61%)));
		}
	</style>

	<style type="text/css">
		.k-hierarchy-cell
		{
			width: 25px;
		}
	</style>

	<script>
		function beforeunload(ev)
		{
//            var event = ev || window.event;
//            event.returnValue = "Are you sure you want to close this window? "
//                    + "All of your work will be lost if you close";
//            deleteCookie("login");
		}
		function startOnLoad()
		{

		}
	</script>
</head>

<body onbeforeunload="beforeunload(event);" onload="startOnLoad()">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container-fluid" style="background-color:#0A64A4">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="brand" href="index.html" style="padding-left:20px">
				<img alt="监控icon" src="icons/monitor_48.png">
				<span style="font-size:26px;color:#ffffff;vertical-align:middle">海洋观测系统运行状态监控</span>
			</a>
		</div>

		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-right">
				<!--<li><a id="setting" href="#responsive" data-toggle="modal"><span class="icon-cogs"></span>&nbsp;设置</a></li>-->
				<li><a id="message" href="#responsive" data-toggle="modal"><span class="icon-envelope"></span>&nbsp;消息</a></li>
				<li><a id="about" href="#responsive" data-toggle="modal"><span class="icon-question-sign"></span>&nbsp;关于</a>
				</li>
				<li class="dropdown">
					<a href="#user" class="dropdown-toggle" data-toggle="dropdown">
						<span class="icon-user"></span>
						<span id="loginName">&nbsp;用户</span>
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a id="account" href="#responsive" data-toggle="modal"><i class="icon-user"></i>&nbsp;账户</a></li>
						<li class="divider"></li>
						<li><a href="login.html" onclick="logout()"><i class="icon-off"></i>&nbsp;退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1 sidebar" style="background-color:#2E3538;font-family:'微软雅黑'">
			<ul class="nav nav-sidebar">
				<li class="active">
					<span class="glow"></span>
					<a href="index.html">
						<span class="icon-dashboard icon-2x" style="color:#dfdfdf;"></span>
						<span style="font-size:18px; color:#dfdfdf;">仪表盘</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="file.html">
						<span class="icon-file-text icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">&nbsp;文件</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="server.html">
						<span class="icon-tasks icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">服务器</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="cpu.html">
						<span class="icon-circle-blank icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">&nbsp;CPU</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="memory.html">
						<span class="icon-ticket icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">内存</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="disk.html">
						<span class="icon-hdd icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">&nbsp;磁盘</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="network.html">
						<span class="icon-globe icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf;">&nbsp;网络</span>
					</a>
				</li>
			</ul>
			<ul class="nav nav-sidebar">
				<li>
					<span class="glow"></span>
					<a href="database.html">
						<span class="icon-calendar icon-2x" style="color:#dfdfdf"></span>
						<span style="font-size:18px; color:#dfdfdf">数据库</span>
					</a>
				</li>
			</ul>
		</div>

		<div class="col-sm-10 col-sm-offset-2 col-md-10 col-md-offset-2 col-lg-11 col-lg-offset-1 main">
			<ul class="breadcrumb">
				<li><a href="#">首页</a>
				</li>
				<li class="active">仪表盘
				</li>
			</ul>

			<div class="sortable row-fluid">
				<a id="servers" data-rel="tooltip" title="6 new members." class="well span3 top-block" href="#responsive" data-toggle="modal" style="text-decoration : none;padding-bottom:5px">
					<span id="iconServers" class="icon-2x icon-tasks"></span>

					<div id="textServers" style="padding-top:5px">服务器·信息</div>
					<div id="serverNo">数量：0</div>
					<span id="notiServers" class="notification">0</span>
				</a>

				<a id="users" data-rel="tooltip" title="4 new pro members." class="well span3 top-block" href="#responsive" data-toggle="modal" style="text-decoration : none;padding-bottom:5px">
					<span id="iconUsers" class="icon-2x icon-user"></span>

					<div id="textUsers" style="padding-top:5px">用户·信息</div>
					<div id="userNo">数量：0</div>
					<span id="notiUsers" class="notification green">0</span>
				</a>

				<a id="files" data-rel="tooltip" title="12 new files." class="well span3 top-block" href="#responsive" data-toggle="modal" style="text-decoration : none;padding-bottom:5px">
					<span id="iconFiles" class="icon-2x icon-folder-open"></span>

					<div id="textFiles" style="padding-top:5px">文件·信息</div>
					<div id="fileNo">数量：25</div>
					<span id="notiFiles" class="notification red">0</span>
				</a>

				<a id="warnings" data-rel="tooltip" title="$34 new sales." class="well span3 top-block" href="#responsive" data-toggle="modal" style="text-decoration : none;padding-bottom:5px">
					<span id="iconWarnings" class="icon-2x icon-flag"></span>

					<div id="textWarnings" style="padding-top:5px">警告·消息</div>
					<div id="warnNo">数量：20</div>
					<span id="notiWarnings" class="notification yellow">0</span>
				</a>

			</div>
			<div class="col-sm-12 col-md-12 col-lg-12" style="padding-left:0px;padding-right:0px;">
				<div class="panel panel-primary">
					<div class="panel-heading"><b>网络连通状态：</b></div>
					<div class="panel-body">
						<!--<div id="diagram" class="col-sm-6 col-md-6 col-lg-6 placeholder" style="height:230px;padding-left:0px;padding-right:0px;"></div>-->
						<!--<div id="stateTable" class="col-sm-5 col-md-5 col-lg-5 placeholder" style="height:230px;padding-left:0px;padding-right:0px;"></div>-->
						<div class="col-sm-6 col-md-6 col-lg-6 placeholder" style="margin-bottom:0px;padding-left:0px">
							<div id="diagram" class="col-sm-12 col-md-12 col-lg-12 placeholder" style="height:230px;padding-left: 0px;padding-right:10px;margin-bottom:0px;"></div>
						</div>
						<div class="col-sm-6 col-md-6 col-lg-6 placeholder" style="margin-bottom:0px;padding-right:0px;padding-left:5px">
							<div id="stateTable" class="col-sm-12 col-md-12 col-lg-12 placeholder" style="height:230px;padding-left:0px;padding-right:0px;margin-bottom:0px"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-12 col-md-12 col-lg-12" style="padding-left:0px;padding-right:0px">
				<div class="panel panel-primary">
					<div class="panel-heading"><b>“服务器—CPU”状态监控：</b></div>
					<div class="panel-body">
						<div id="stateCPU"></div>
					</div>
				</div>
			</div>
			<div class="col-sm-12 col-md-12 col-lg-12" style="padding-left:0px;padding-right:0px">
				<div class="panel panel-primary">
					<div class="panel-heading"><b>“服务器—内存”状态监控：</b></div>
					<div class="panel-body">
						<div id="stateMemory"></div>
					</div>
				</div>
			</div>
			<div class="col-sm-12 col-md-12 col-lg-12" style="padding-left:0px;padding-right:0px">
				<div class="panel panel-primary">
					<div class="panel-heading"><b>“服务器—网络”状态监控：</b></div>
					<div class="panel-body">
						<div id="stateNetwork"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<hr>
<footer class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom:20px">
	<p style="text-align:center">Copyright © 2014 ShangHai Ocean University * Institute For Digital Ocean . All Rights
		Reserved.</p>
</footer>
</div>

<!-- Modal Definitions (tabbed over for <pre>) -->
<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h4 id="responsiveTitle" class="modal-title" style="text-align:center;font-weight:bold;"></h4>
	</div>
	<div class="modal-body">
		<div class="row">
			<div id="responsiveBody">// class="col-md-offset-1 col-md-10">

			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
		<!--<button type="button" class="btn btn-primary">Save changes</button>-->
	</div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Jquery and Bootstrap -->
<script src="js/jquery.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- Modal JS -->
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>

<!-- Kendo UI -->
<script src="js/kendo.all.min.js"></script>

<script>
	//全局变量声明
	//Server URL
	//    var serverURL = "http://192.168.182.48:8080/api/sql?sql=";
	var serverURL = "http://202.121.66.51:8083/api/sql?sql=";
	//ServerInfo
	var serverInfo;
	//UserInfo
	var userInfo;
	//LoopTime
	var loopTime = 5000;
	//ColorSchemaArray
	var colorArray = ["#ef6944", "#ee587b", "#75be16"];
	//ConnectArray
	var connStateInfo;
	//CPU upper
	var cpuUpper = 90;
	//Memory upper
	var memoryUpper = 95;
	//Network loss upper
	var networkLossupper = 100;
	//Init file Message No
	var initFileTagNo = 0;
	//Init Warn Message No
	var initWarinNo = 0;
	//Refresh server no flag
	var serverChangeFlag = 0;

	//时间格式转换
	Date.prototype.Format = function (fmt)
	{ //author: meizz
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	};

	//Responsive <a> 的点击监听事件
	$('a').click(function (e)
	{
		var title = document.getElementById("responsiveTitle");
		var body = document.getElementById("responsiveBody");
		while (body.childNodes.length)
		{
			body.removeChild(body.firstChild);
		}
//        console.log(e.target.id);
		body.className = "col-md-offset-1 col-md-10";
//        var resp = document.getElementById("responsive");
//        resp.dataset.width = "760";
//        console.log("target ID:"+e.target.id+"  "+ e.currentTarget);
		switch (e.target.id)
		{
			case "about":
				title.innerText = "关于“海洋观测系统运行状态监控”";
				bodyAbout(body);
				break;
			case "message":
				title.innerText = "消息";
				bodyMessage(body);
				break;
			case "setting":
				title.innerText = "设置";
				bodySetting(body);
				break;
			case "account":
				title.innerText = "账户信息";
				bodyAccount(body);
				break;
			case "servers":
			case "iconServers":
			case "textServers":
			case "notiServers":
			case "serverNo":
				title.innerText = "服务器组信息";
				bodyServers(body);
				break;
			case "users":
			case "iconUsers":
			case "textUsers":
			case "notiUsers":
			case "userNo":
				title.innerText = "用户组信息";
				bodyUsers(body);
				break;
			case "warnings":
			case "iconWarnings":
			case "textWarnings":
			case "notiWarnings":
			case "warnNo":
				title.innerText = "告警信息";
				bodyWarnings(body);
				break;
			case "files":
			case "iconFiles":
			case "textFiles":
			case "notiFiles":
			case "fileNo":
				title.innerText = "文件信息";
				bodyFiles(body);
				break;
			default :
				title.innerText = "Responsive Title";
		}
	});

	// About Body function
	function bodyAbout(fatherDiv)
	{
		var h4 = document.createElement("h4");
		h4.innerText = "介绍：";
		fatherDiv.appendChild(h4);
		var para = document.createElement("p");
		para.innerText = "海洋观测系统运行状态监控是海洋公益性行业科研专项项目“海洋观测系统运行状态监控技术研究与示范”的子项目之一。" +
				"        该系统由国家海洋局东海分局信息中心与上海海洋大学合作研究开发，研发成员有：郭颖新，季丽伟，韦躐晟等。";
		fatherDiv.appendChild(para);
	}
	// Message Body function
	function bodyMessage(fatherDiv)
	{
		var messageDiv = document.createElement("div");
		messageDiv.id = "messageDiv";
		fatherDiv.className = "col-md-12";
		fatherDiv.appendChild(messageDiv);

		var messageInfoSql = "select * from messageInfo group by ID desc limit 200";
		var messageUrl = serverURL + messageInfoSql;
		$.ajax({
			url: messageUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
				for (var i in req)
				{
					req[i].DateTime = req[i].DateTime.replace("T", " ");
				}
				$("#messageDiv").kendoGrid({
					dataSource: {
						data: req,
						pageSize: 10
					},
					pageable: {
						refresh: true,
						pageSizes: true,
						buttonCount: 5
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					columns: [{
						field: "ID",
						title: "ID",
						width: 10
					}, {
						field: "ServerID",
						title: "Server",
						width: 20
					}, {
						field: "Aspect",
						title: "方面",
						width: 30
					}, {
						field: "Content",
						title: "内容",
						width: 80
					}, {
						field: "DateTime",
						title: "时间",
						width: 45
					}]
				});
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	// Setting Body function
	function bodySetting(fatherDiv)
	{

	}
	// Account Body function
	function bodyAccount(fatherDiv)
	{
		var userCount = document.createElement("div");
		userCount.id = "userCount";
		fatherDiv.appendChild(userCount);

		var userInfoSql = "select * from user where UserName=\"" + getCookie("loginUser") + "\"";
		var userUrl = serverURL + userInfoSql;
		$.ajax({
			url: userUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
				$("#userCount").kendoGrid({
					dataSource: {
						data: req
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					columns: [{
						field: "UserName",
						title: "用户名",
						width: 50
					}, {
						field: "Passwords",
						title: "密码",
						width: 50
					}, {
						field: "Level",
						title: "权限等级",
						width: 40
					}, {
						field: "RegistTime",
						title: "注册时间",
						width: 80
					}, {
						field: "ID",
						title: "ID",
						width: 20
					}]
				});
			},
			complete: function ()
			{
				//请求完成的处理
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	// Servers Body function
	function bodyServers(fatherDiv)
	{
		var serverTable = document.createElement("div");
		serverTable.id = "serverTable";
		fatherDiv.appendChild(serverTable);
		fatherDiv.className = "col-md-12";
//        var resp = document.getElementById("responsive");
//        resp.dataset.width = "auto";
//        resp.addClass = "center";
		var serverSource = new kendo.data.DataSource({
			autoSync: false,
			transport: {
				read: function (options)
				{
//                    console.log("read");
					var readSQL = "select * from server";
//                    console.log(readSQL);
					$.ajax({
						url: serverURL + readSQL,
						dataType: "json",
						success: function (result)
						{
//                            console.log("read success!");
							options.success(result);
						},
						error: function (result)
						{
//                            console.log("read error!");
							options.error(result);
						}
					});
				},
				update: function (options)
				{
//                    console.log("update" + options.data.models[0].ServerID + " " + options.data.models[0].ServerIP + " " + options.data.models[0].ServerName + " " + options.data.models[0].Station);
					var updateSQL = "update server SET ServerIP=" + "\"" + options.data.models[0].ServerIP
							+ "\"," + "ServerName=" + "\"" + options.data.models[0].ServerName + "\","
							+ "Station=" + "\"" + options.data.models[0].Station + "\"," + "Description="
							+ "\"" + options.data.models[0].Description + "\"" + " where ServerID = "
							+ "\"" + options.data.models[0].ServerID + "\"";
//                    console.log(updateSQL);
					$.ajax({
						url: serverURL + updateSQL,
						dataType: "json",
						success: function (result)
						{
//                            console.log("update success!");
							options.success(result);
						},
						error: function (result)
						{
//                            console.log("update error!");
							options.error(result);
						}
					});
				},
				destroy: function (options)
				{
					if (options.data.models)
					{
//                        console.log("destroy");
						var deleteSQL = "delete from server where ServerID = " + "\""
								+ options.data.models[0].ServerID + "\"";
//                        console.log(deleteSQL);
						$.ajax({
							url: serverURL + deleteSQL,
							dataType: "json",
							success: function (result)
							{
//                                console.log("delete success!");
								options.success(result);
								// server No flag changed  =1
								serverChangeFlag = 1;
							},
							error: function (result)
							{
//                                console.log("delete error!");
								options.error(result);
							}
						});

					}
				},
				create: function (options)
				{
//                    console.log("create");
					var serverID = options.data.models[0].ServerID;
					var serverIP = options.data.models[0].ServerIP;
					var serverName = options.data.models[0].ServerName;
					var station = options.data.models[0].Station;
					var description = options.data.models[0].Description;
					var insert = "insert into server (ServerID,ServerIP,ServerName,Station,Description) values("
							+ "\"" + serverID + "\"," + "\"" + serverIP + "\"" + "," + "\"" + serverName + "\""
							+ "," + "\"" + station + "\"" + "," + "\"" + description + "\")";
//                    console.log(insert);
					$.ajax({
						url: serverURL + insert,
						dataType: "json",
						data: {
							models: kendo.stringify(options.data.models)
						},
						success: function (result)
						{
							// server No flag changed  =1
							serverChangeFlag = 1;

							options.success(result);
						},
						error: function (result)
						{
							options.error(result);
						}
					});

				}
			},
			batch: true,
			pageSize: 20,
			schema: {
				type: "json",
				model: {
					id: "ServerID",
					fields: {
						ServerID: {
							validation: {
								required: true
							},
							editable: true,
							nullable: true
						},
						ServerName: {
							validation: {
								required: true
							}
						},
						ServerIP: {},
						Station: {},
						Description: {}
					}
				}
			}
		});

		$("#serverTable").kendoGrid({
			dataSource: serverSource,
			pageable: true,
//                    height: 430,
			toolbar: ["create"],
			detailTemplate: "<div>描述信息: #: Description #</div>",
			columns: [{
				field: "ServerID",
				title: "Server",
				width: "45px"
			}, {
				field: "ServerIP",
				title: "IP",
				width: "70px"
			}, {
				field: "ServerName",
				title: "服务器名",
				width: "60px"
			}, {
				field: "Station",
				width: "50px"
//            }, {
//                field: "LocationX",
//                title: "经度",
//                width: "60px"
//            },{
//                field: "LocationY",
//                title: "纬度",
//                width: "60px"
			}, {
				field: "Description",
				title: "描述信息",
				width: "50px"
			}, {
				command: ["edit", "destroy"],
//                title: "&nbsp;",
				width: "100px"
			}],
			editable: "inline"
		});
	}
	// Users Body function
	function bodyUsers(fatherDiv)
	{
		var userTable = document.createElement("div");
		userTable.id = "userTable";
		fatherDiv.appendChild(userTable);

		var userInfoSql = "select * from user";
		var userUrl = serverURL + userInfoSql;
		$.ajax({
			url: userUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				if (req.length > 0)
				{
					for (var i in req)
					{
						if (req[i].RegistTime)
						{
							req[i].RegistTime = req[i].RegistTime.replace("T", " ");
						}
					}
					//请求成功时处理
					$("#userTable").kendoGrid({
						dataSource: {
							data: req
						},
						navigatable: true,
//                    height: 430,
						scrollable: {
							virtual: true
						},
						sortable: true,
						columns: [{
							field: "UserName",
							title: "用户名",
							width: 50
						}, {
//                        field: "Passwords",
//                        title: "密码",
//                        width: 50
//                    }, {
							field: "Level",
							title: "权限等级",
							width: 40
						}, {
							field: "RegistTime",
							title: "注册时间",
							width: 80
						}, {
							field: "ID",
							title: "ID",
							width: 20
						}]
					});
				}
			},
			complete: function ()
			{
				//请求完成的处理
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	// Warnings Body function
	function bodyWarnings(fatherDiv)
	{
		bodyMessage(fatherDiv);
	}
	// Files Body function
	function bodyFiles(fatherDiv)
	{
		var filesTable = document.createElement("div");
		filesTable.id = "filesTable";
		fatherDiv.appendChild(filesTable);
		fatherDiv.className = "col-md-12";

		var filesInfoSql = "select * from fileinfo group by FileID desc limit 150";
		var filesUrl = serverURL + filesInfoSql;
		$.ajax({
			url: filesUrl, //请求的url地址
			dataType: "json", //返回格式为json
			async: true, //请求是否异步，默认为异步，这也是ajax重要特性
			//data:{"id":"value"},    //参数值
			type: "GET", //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				for (var i in req)
				{
					req[i].DataTime = req[i].DataTime.replace("T", " ");
				}
				//请求成功时处理
				$("#filesTable").kendoGrid({
					dataSource: {
						data: req,
						pageSize: 10
					},
					pageable: {
						refresh: true,
						pageSizes: true,
						buttonCount: 5
					},
					navigatable: true,
//                    height: 430,
					scrollable: {
						virtual: true
					},
					sortable: true,
					detailTemplate: "<div>文件路径: #: FilePath #</div>",
					columns: [{
						field: "FileID",
						title: "ID",
						width: 20
					}, {
						field: "FileName",
						title: "文件名",
						width: 40
					}, {
						field: "FileState",
						title: "站点",
						width: 30
					}, {
						field: "EventType",
						title: "类型",
						width: 20
					}, {
						field: "DataTime",
						title: "时间",
						width: 45
					}]
				});
			},
			complete: function ()
			{
				//请求完成的处理
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}

	//上传并写入监控的警告信息
	function upLoadMessage(idServer, aspect, value, content, dateTiem, reminder)
	{
		var messageSql = "insert into messageinfo (ServerID,Aspect,Value,Content,DateTime,Reminder) " +
				"values(\"" + idServer + "\",\"" + aspect + "\",\"" + value + "\",\"" + content + "\",\"" + dateTiem + "\",\"" + reminder + "\")";
		var upUrl = serverURL + messageSql;
		$.ajax({
			url: upUrl,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: true,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}

	// Organize Network Connect Data
	function organizeConnectData()
	{
		//存储serverInfo信息
		for (var i in serverInfo)
		{
			serverInfo[i].state = "良好";
			serverInfo[i].stateFlag = 1;
			serverInfo[i].connect = "在线";
			serverInfo[i].connectFlag = 1;
			serverInfo[i].ID = 1; //connectFlag
			serverInfo[i].DataTime = "";
			serverInfo[i].colorScheme = colorArray[i % 3];
			serverInfo[i].title = "状态良好";
			serverInfo[i].image = "okServer_48.png";
		}
		connStateInfo = [{
			ServerID: "0",
			ServerName: "交换机",
			image: "networkServer_48.png",
			title: "状态良好",
			colorScheme: "#1696d3",
			items: serverInfo
		}];
	}
	// Update Connect Data
	function updateConnectData()
	{
		var dataSql = "select * from (select * from netconnectinfo order by DataTime desc) as d group by LocalIP,TargetIP";
		var dataUrl = serverURL + dataSql;
		$.ajax({
			url: dataUrl,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: true,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			beforeSend: function ()
			{
				//请求前的处理
			},
			success: function (req)
			{
				//请求成功时处理
//                // 更新服务器状态State
				var diagram = $("#diagram").getKendoDiagram();
				var grid = $("#stateTable").data("kendoGrid");
				for (var temp in serverInfo)
				{
					serverInfo[temp].connectFlag = 1;
				}
				for (var i in req)
				{
					var indexS, indexD;
					for (var j in serverInfo)
					{
						if (serverInfo[j].ServerIP == req[i].LocalIP)
						{
							indexS = j;
						}
						if (serverInfo[j].ServerIP == req[i].TargetIP)
						{
							indexD = j;
						}
					}
					//Update the table data
					if (req[i].IPStatus == 1 && req[i].ID != grid.dataSource.at(indexS).ID)
					{
						//更新ID值，
						grid.dataSource.at(indexS).ID = req[i].ID;
						grid.dataSource.at(indexD).ID = req[i].ID;

						var rowData1 = grid.dataSource.at(indexS);
						rowData1.set("connect", "在线");
						rowData1.set("DataTime", req[i].DataTime.replace("T", " "));
						var rowData2 = grid.dataSource.at(indexD);
						rowData2.set("connect", "在线");
						rowData2.set("DataTime", req[i].DataTime.replace("T", " "));
						serverInfo[indexS].connectFlag = 2;
						serverInfo[indexD].connectFlag = 2;
						// Change the Line Green
						diagram.connections[indexS].redraw({
							stroke: {
								color: "green"
							}
						});
						diagram.connections[indexD].redraw({
							stroke: {
								color: "green"
							}
						});
					}
					else
					{
//                        serverInfo[indexS].connectFlag ++;
//                        serverInfo[indexD].connectFlag ++;
						// Row Table Change
						var rowData1 = grid.dataSource.at(indexS);
						rowData1.set("connect", "中断");
						var rowData2 = grid.dataSource.at(indexD);
						rowData2.set("connect", "中断");
						if (req[i].ID == grid.dataSource.at(indexS).ID)
						{
							var nowTime = new Date().Format("yyyy-MM-dd hh:mm:ss");
							rowData1.set("DataTime", nowTime);
							rowData2.set("DataTime", nowTime);
						}
						else
						{
							rowData1.set("DataTime", req[i].DataTime.replace("T", " "));
							rowData2.set("DataTime", req[i].DataTime.replace("T", " "));
						}
//                        serverInfo[indexS].connectFlag = -1;
						// Change the Line Grey
						diagram.connections[indexS].redraw({
							stroke: {
								color: "grey"
							}
						});
						diagram.connections[indexD].redraw({
							stroke: {
								color: "grey"
							}
						});
					}
				}

				// 某服务器 无连通数据时，做如下判断
				for (var demo in serverInfo)
				{
//                    console.log(demo + "  "+serverInfo[demo].connectFlag);
					if (serverInfo[demo].connectFlag == 1)
					{
						var rowData1 = grid.dataSource.at(demo);
						rowData1.set("connect", "中断");
						var nowTime = new Date().Format("yyyy-MM-dd hh:mm:ss");
						rowData1.set("DataTime", nowTime);
					}
				}
			},
			complete: function ()
			{
				//请求完成的处理
			},
			error: function ()
			{
				//请求出错处理
				alert("更新连通状态数据失败，请检查！");
			}
		});
	}
	// Diagram visualTemplate
	function visualTemplate(options)
	{
		var dataviz = kendo.dataviz;
		var g = new dataviz.diagram.Group({
			autoSize: true
		});
		var dataItem = options.dataItem;
		g.append(new dataviz.diagram.Rectangle({
			width: 120,
			height: 40,
			stroke: {
				width: 0
			},
			background: dataItem.colorScheme
		}));
		g.append(new dataviz.diagram.TextBlock({
			text: "Server" + dataItem.ServerID,
			fontSize: 16,
			x: 45,
			y: 5,
			color: "#fff"
		}));
		g.append(new dataviz.diagram.TextBlock({
			text: dataItem.title,
			fontSize: 12,
			x: 45,
			y: 25,
			color: "#fff"
		}));
		g.append(new dataviz.diagram.Image({
			source: "icons/" + dataItem.image,
			x: 1,
			y: 1,
			width: 38,
			height: 38
		}));

		return g;
	}
	// Create Diagram
	function createDiagram()
	{
		var customDia = $("#diagram").kendoDiagram({
			dataSource: new kendo.data.HierarchicalDataSource({
				data: connStateInfo,//data
				schema: {
					model: {
						children: "items"
					}
				}
			}),
			autoBind: true,
			layout: {
				type: "tree"//"layered"
			},
			zoomRate: 1,
			shapeDefaults: {
				visual: visualTemplate,
				editable: false,
				rotatable: false,
				resizable: false
			},
			connectionDefaults: {
				stroke: {
					color: "#979797",
					width: 2
				}
			}
		}).data("kendoDiagram");
		customDia.layout();
//        customDia.setDataSource(connStateInfo);
//        serverInfo[2].title = "Not OK";
//        var diagram = $("#diagram").getKendoDiagram();
//        diagram.bringIntoView(diagram.shapes);
//        var con1=  diagram.connect(diagram.shapes[0],diagram.shapes[1],
//                {
//                    stroke:
//                    { color:"green"},
//                    hover: {
//                        stroke: {
//                            color: "blue"
//                        }
//                    },
////                    startCap:"ArrowStart",
//                    endCap:"ArrowEnd"
//                });

	}
	// Connection table
	function createStateTable()
	{
		$("#stateTable").kendoGrid({
			dataSource: {
				data: serverInfo
			},
//            selectable: "multiple",//"multiple cell",
			navigatable: true,
			columns: [{
				field: "ServerID",
				title: "ID",
				width: 10
			}, {
				field: "ServerName",
				title: "服务器名称",
				width: 40
			}, {
				field: "state",
				title: "状态",
				width: 20
			}, {
				field: "connect",
				title: "连通性",
				width: 30
			}, {
				field: "DataTime",
				title: "时间",
				width: 45
			}]
		});
	}

	//CPU GaugeValue
	function cpuGaugeValue()
	{
		var cpuSQL = "select * from ( select * from CPUAvgINFO order by DataTime desc) as c group by ServerID";
		$.ajax({
			url: serverURL + cpuSQL,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: true,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
					for (var i in req)
					{
						var gaugeName = "#stateCPUServer" + req[i].ServerID + "Gauge";
						var valueName = "stateCPUServer" + req[i].ServerID + "Value";
						$(gaugeName).data("kendoRadialGauge").value(req[i].UsedValue);
						document.getElementById(valueName).innerText = "Server" + req[i].ServerID + " CPU: " + req[i].UsedValue + "%";
						if (req[i].UsedValue >= cpuUpper)
						{
							var idServer = req[i].ServerID;
							var aspect = "CPU";
							var value = req[i].UsedValue;
							var content = "CPU平均使用率大于" + cpuUpper + "%！";
							var dataTime = req[i].DataTime;
							var reminder = "CPU长时间超负荷运行，对服务器有损，请检查！";
							upLoadMessage(idServer, aspect, value, content, dataTime, reminder);
						}
					}
				}
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	//Memory PieValue
	function memoryPieValue()
	{
		var memorySQL = "select * from ( select * from physicalmemoryinfo order by DataTime desc) as c group by ServerID";
		$.ajax({
			url: serverURL + memorySQL,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: true,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
					for (var i in req)
					{
						var pieId = "stateMemoryServer" + req[i].ServerID + "Pie";
						var pieName = "#stateMemoryServer" + req[i].ServerID + "Pie";
						var unUsed = 100 - req[i].MemoUseage;
						var data = [{
							"ID": req[i].ID,
							"source": "已使用",
							"percentage": req[i].MemoUseage,
							"explode": true
						}, {
							"source": "未使用",
							"percentage": unUsed
						}];
						if (!$(pieName).data("kendoChart"))
						{
							createPie(req[i].ServerID, pieId, data);
						}
						else
						{
							if ($(pieName).data("kendoChart").dataSource.at(0).ID != req[i].ID)
							{
								createPie(req[i].ServerID, pieId, data);
								serverInfo[i].stateFlag = 1;
							}
							else
							{
								serverInfo[i].stateFlag++;
								if (serverInfo[i].stateFlag > 5)
								{
									// 更新服务器状态State
									var diagram = $("#diagram").getKendoDiagram();
									var gaugeName = "#stateCPUServer" + req[i].ServerID + "Gauge";
									if (req[i].MemoUseage > memoryUpper)
									{
										serverInfo[i].title = "内存小有压力";
									}
									else if ($(gaugeName).data("kendoRadialGauge").value() >= cpuUpper)
									{
										serverInfo[i].title = "CPU小有压力";
									}
									else
									{
										serverInfo[i].title = "状态不佳";
									}

									serverInfo[i].image = "errorServer_48.png";
									diagram.clear();
									diagram.setDataSource(connStateInfo);

									var grid = $("#stateTable").data("kendoGrid");
									var rowData1 = grid.dataSource.at(i);
									rowData1.set("state", "差劲");
								}
							}
						}

						// 若达到警告值，写入数据库Message
						if (req[i].MemoUseage > memoryUpper)
						{
							var idServer = req[i].ServerID;
							var aspect = "内存";
							var value = req[i].MemoUseage;
							var content = "内存使用率大于" + memoryUpper + "%！";
							var dataTime = req[i].DataTime;
							var reminder = "内存使用率过高，若长时间过高，请务必检查！";
							upLoadMessage(idServer, aspect, value, content, dataTime, reminder);
						}
					}
				}
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	//Network DonutValue
	function networkDonutValue()
	{
		var networkSQL = "select * from (select * from netfluxinfo order by DataTime desc) as d group by ServerID";
		$.ajax({
			url: serverURL + networkSQL,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: true,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
					for (var i in req)
					{
						var donutId = "stateNetworkServer" + req[i].ServerID + "Donut";
						var pieName = "#stateNetworkServer" + req[i].ServerID + "Donut";
						var dataItem = [{
							"ID": req[i].ID,
							"ServerID": req[i].ServerID,
							"year": 4,
							"resolution": "上传速率",
							"share": req[i].UpLoagFlux,
							"visibleInLegend": false,
							"order": 1,
							"color": "#10C4B2"
						}, {
							"ServerID": req[i].ServerID,
							"year": 4,
							"resolution": "空闲",
							"share": 100,
							"visibleInLegend": false,
							"order": 2,
							"color": "#ccc"
						}, {
							"ServerID": req[i].ServerID,
							"year": 3,
							"resolution": "下载速率",
							"share": req[i].DownLoadFlux,
							"visibleInLegend": false,
							"order": 1,
							"color": "#4AA5E4"
						}, {
							"ServerID": req[i].ServerID,
							"year": 3,
							"resolution": "空闲",
							"share": 100,
							"visibleInLegend": false,
							"order": 2,
							"color": "#ccc"
						}, {
							"ServerID": req[i].ServerID,
							"year": 2,
							"resolution": "in丢包数",
							"share": req[i].InPacketLoss,
							"visibleInLegend": false,
							"order": 1
						}, {
							"ServerID": req[i].ServerID,
							"year": 2,
							"resolution": "空闲",
							"share": 10,
							"visibleInLegend": false,
							"order": 2,
							"color": "#ccc"
						}, {
							"ServerID": req[i].ServerID,
							"year": 1,
							"resolution": "out丢包数",
							"share": req[i].OutPacketLoss,
							"visibleInLegend": false,
							"order": 1,
							"color": "#c00"
						}, {
							"ServerID": 1,
							"year": 1,
							"resolution": "空闲",
							"share": 10,
							"visibleInLegend": false,
							"order": 2,
							"color": "#ccc"
						}];
						if (!$(pieName).data("kendoChart"))
						{
							createDonut(req[i].ServerID, donutId, dataItem);
						}
						else if ($(pieName).data("kendoChart").dataSource.at(0).ID != req[i].ID)
						{
							createDonut(req[i].ServerID, donutId, dataItem);
						}
						// 若出现警告值，写入数据库
						if (req[i].InPacketLoss >= networkLossupper || req[i].OutPacketLoss >= networkLossupper)
						{
							var idServer = req[i].ServerID;
							var aspect = "网络";
							var value;
							if (req[i].InPacketLoss >= req[i].OutPacketLoss)
							{
								value = req[i].InPacketLoss;
							}
							else
							{
								value = req[i].OutPacketLoss;
							}
							var content = "网络丢包数大于" + networkLossupper + "%！";
							var dataTime = req[i].DataTime;
							var reminder = "网络丢包严重，请务必检查服务器的连线或网络！";
							upLoadMessage(idServer, aspect, value, content, dataTime, reminder);
						}
					}
				}
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}

	//创建Gauge,初始化Gauge及Data
	function createGauge(gaugeID, value)
	{
		var gaugeName = "#" + gaugeID;
		$(gaugeName).height(150);
		$(gaugeName).kendoRadialGauge({
			pointer: {
				value: value
			},
			scale: {
				minorUnit: 5,
				startAngle: -30,
				endAngle: 210,
				max: 100,
				labels: {
					position: "inside",
					template: "#= value #%"
				},
				ranges: [
					{
						from: 20,
						to: 50,
						color: "#ffc700"
					}, {
						from: 50,
						to: 80,
						color: "#ff7a00"
					}, {
						from: 80,
						to: 100,
						color: "#c20000"
					}
				]
			}
		});

	}
	function initGauge(layer, serverID, value)
	{
		var divG = document.createElement("div");
		divG.className = "col-sm-4 col-md-4 col-lg-4 placeholder";
		var gauge = document.createElement("div");
		gauge.id = layer + "Server" + serverID + "Gauge";

		var labelValue = document.createElement("div");
		labelValue.style.textAlign = "center";
		labelValue.id = layer + "Server" + serverID + "Value";
		labelValue.style.paddingTop = "15px";
		labelValue.innerText = "Server" + serverID + " CPU: " + value + "%";

		divG.appendChild(gauge);
		divG.appendChild(labelValue);
		var body = document.getElementById(layer);
		body.appendChild(divG);
		createGauge(gauge.id, value);
	}
	//创建、初始化Pie
	function createPie(serverID, pieID, pieDataSource)
	{
		var pieName = "#" + pieID;
		var title = "Server" + serverID + " 内存 使用率";
		$(pieName).kendoChart({
			title: {
				text: title
			},
			chartArea: {
				height: 250
			},
			legend: {
				position: "bottom"
			},
			dataSource: {
				data: pieDataSource
			},
			series: [{
				type: "pie",
				labels: {
					visible: true,
					template: "Value: #: value #%",
					position: "outsideEnd"
				},
				field: "percentage",
				categoryField: "source",
				explodeField: "explode"
			}],
			seriesColors: ["#42a7ff", "#999999"],
			tooltip: {
				visible: true,
				template: "${ category } - ${ value }%"
			}
		});
	}
	function initPie(layer, serverID)
	{
		var divP = document.createElement("div");
		divP.className = "col-sm-4 col-md-4 col-lg-4 placeholder";
		divP.id = layer + "Server" + serverID + "Pie";
		var body = document.getElementById(layer);
		body.appendChild(divP);
//        createPie(divP.id,dataSource);
	}
	//创建 and 初始化Donut
	function createDonut(serverID, donutID, donutDataSource)
	{
		var donutName = "#" + donutID;
		var title = "Server" + serverID + " 网络流量数据";
		$(donutName).kendoChart({
			dataSource: {
				data: donutDataSource,
				sort: {
					field: "order",
					dir: "asc"
				},
				group: {
					field: "year"
				}
			},
			chartArea: {
				height: 250
			},
			title: {
				text: title
			},
			seriesDefaults: {
				type: "donut",
				startAngle: 0
			},
			series: [{
				labels: {
//                    visible: true,
//                    template: "Value: #: value #kb/s"
//                    position: "bottom"
				},
				field: "share",
				categoryField: "resolution",
				visibleInLegendField: "visibleInLegend",
				padding: 10
			}],
			tooltip: {
				visible: true,
				template: "#= dataItem.resolution #: #= value #kb/s (Server#= dataItem.ServerID #)"
			}
		});
	}
	function initDonut(layer, serverID)
	{
		var divD = document.createElement("div");
		divD.className = "col-sm-4 col-md-4 col-lg-4 placeholder";
		divD.id = layer + "Server" + serverID + "Donut";
		var body = document.getElementById(layer);
		body.appendChild(divD);
	}
	//初始化Panel
	function initPanel()
	{
		var panelArray = ["stateCPU", "stateMemory", "stateNetwork"];
		for (var j in serverInfo)
		{
			initGauge(panelArray[0], serverInfo[j].ServerID, 0);
			initPie(panelArray[1], serverInfo[j].ServerID);
			initDonut(panelArray[2], serverInfo[j].ServerID);
		}
		//CPU Memory Network Gauge Value
		cpuGaugeValue();
		memoryPieValue();
		networkDonutValue();
	}

	//New file warn messagesNO
	function newFileNo()
	{
		var fileTagSql = "select * from fileinfo";
		$.ajax({
			url: serverURL + fileTagSql,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: true,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
					document.getElementById("notiFiles").innerText = parseInt(req.length) - parseInt(initFileTagNo);
				}
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}
	function newWarnNo()
	{
		var messageNoSql = "select * from messageInfo";
		$.ajax({
			url: serverURL + messageNoSql,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: false,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
					document.getElementById("notiWarnings").innerText = parseInt(req.length) - parseInt(initWarinNo);
				}
			},
			error: function ()
			{
				//请求出错处理

			}
		});
	}
	function newServerNo()
	{
		var serverNoSql = "select * from server";
		$.ajax({
			url: serverURL + serverNoSql,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: true,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
					document.getElementById("serverNo").innerText = "数量：" + req.length;
				}
			},
			error: function ()
			{
				//请求出错处理
			}
		});
	}

	//定时更新
	function loopRefreshData()
	{
		//Update 网络状态数据 Diagram and Table
		updateConnectData();
		//Updata CPU Memory Network
		cpuGaugeValue();
		memoryPieValue();
		networkDonutValue();
		//Update file warn messages & server no
		newFileNo();
		newWarnNo();
		if (1 == serverChangeFlag)
		{
			newServerNo();
			serverChangeFlag = 0;
		}

		//设置定时更新自调用
		setTimeout("loopRefreshData()", loopTime);
	}
	// Get Cookie Function
	function getCookie(key)
	{
		var arr = document.cookie.match(new RegExp("(^|)" + key + "=([^;]*)(;|$)"));
		if (arr != null)
		{
			return unescape(arr[2]);
		}
		return null;
	}
	// Delete Cookie
	function deleteCookie(key)
	{
		var exp = new Date();
		exp.setTime(exp.getTime() - 1);
		var cVal = getCookie(key);
		if (cVal != null)
		{
			document.cookie = key + "=" + cVal + ";expires=" + exp.toGMTString();
		}
	}

	// Init serverNo
	function initServerNo()
	{
		var serverNoSql = "select * from server";
		$.ajax({
			url: serverURL + serverNoSql,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: false,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
					serverInfo = req;
					document.getElementById("serverNo").innerText = "数量：" + req.length;
				}
			},
			error: function ()
			{
				//请求出错处理
				setTimeout("initServerNo()", loopTime);
			}
		});
	}
	// Init userNo
	function initUserNo()
	{
		var userNoSql = "select * from user";
		$.ajax({
			url: serverURL + userNoSql,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: false,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
					userInfo = req;
					document.getElementById("userNo").innerText = "数量：" + req.length;
				}
			},
			error: function ()
			{
				//请求出错处理
				setTimeout("initUserNo()", loopTime);
			}
		});
	}
	// Init FileNo
	function initFileNo()
	{
		// File table no
		var fileNoSql = "select * from stationinfo";
		$.ajax({
			url: serverURL + fileNoSql,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: false,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
//                    userInfo = req;
					document.getElementById("fileNo").innerText = "数量：" + req.length;
				}
			},
			error: function ()
			{
				//请求出错处理
//                setTimeout("initFileNo()", loopTime);
			}
		});
		// File tag no
		var fileTagSql = "select * from fileinfo";
		$.ajax({
			url: serverURL + fileTagSql,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: true,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
					initFileTagNo = req.length;
				}
			},
			error: function ()
			{
				//请求出错处理
//                setTimeout("initFileNo()", loopTime);
			}
		});
	}
	// Init MessageNo
	function initMessageNo()
	{
		var messageNoSql = "select * from messageInfo";
		$.ajax({
			url: serverURL + messageNoSql,    //请求的url地址
			dataType: "json",   //返回格式为json
			async: false,//请求是否异步，默认为异步，这也是ajax重要特性
//            data:{"id":"value"},    //参数值
			type: "GET",   //请求方式
			success: function (req)
			{
				//请求成功时处理
				if (req.length > 0)
				{
					document.getElementById("warnNo").innerText = "数量：" + req.length;
					initWarinNo = req.length;
				}
			},
			error: function ()
			{
				//请求出错处理
				setTimeout("initMessageNo()", loopTime);
			}
		});
	}
	// Init info
	function initData()
	{
		//Init username from cookie
		document.getElementById("loginName").innerText = " " + getCookie("loginUser");
		//Init serverNo
		initServerNo();
		//Init userNo
		initUserNo();
		//Init fileNo
		initFileNo();
		//Init messageNo
		initMessageNo();

		// Organize Connect
		organizeConnectData();
		// Create Network Diagram
		createDiagram();
		// Create Network Table
		createStateTable();
		// Init Panel
		initPanel();
	}
	function logout()
	{
		deleteCookie("loginUser");
	}
	$(document).ready(function ()
	{
		if (!getCookie("loginUser"))
		{
			window.location = "login.html";
		}
		else
		{
			//初始化
			initData();
			//定时刷新数据
			loopRefreshData();
		}
	})
</script>
</body>
</html>
